<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic DataGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="./easyui-1.9.15/themes/material/easyui.css">
	<link rel="stylesheet" type="text/css" href="./easyui-1.9.15/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="./easyui-1.9.15/demo/demo.css">
	<script type="text/javascript" src="./easyui-1.9.15/jquery.min.js"></script>
	<script type="text/javascript" src="./easyui-1.9.15/jquery.easyui.min.js"></script>
</head>
<body>
	<table id="contentable" data-options="fit:true"></table>
	
	<div id="tbar">
	    <table class="layui-table">
	        <tr>
	            <td>
	                <div class='fl'>
	                    <form method="post" id="ff"  onsubmit="return false;">
	
	                        <div class="layui-inline">
	                            <label class="layui-form-label">账号名称</label>
	                            <div class="layui-input-inline">
	                                <input type="text" name="username" class="easyui-textbox">
	                            </div>
	                        </div>
	
	                        <div class="layui-inline">
	                            <a href="#" style='float:left'>搜索</a>
	                        </div>
	                        
	                    </form>
	                </div>
	            </td>
	            
	        </tr>
	    </table>
	</div>
	
	<script>
	//参数在jquery.easyui.min.js中查找设置，所有参数都必要
	$.fn.pagination.defaults.layout     = ["list","sep","first","prev","sep","links","sep","next","last","sep","refresh","info"];
	$.fn.datagrid.defaults.pageSize     = 30;
	$.fn.datagrid.defaults.pageList     = [10,20,30,40,50,60,70,80,90,100,200,300,400,500,1000];
	$.fn.datagrid.defaults.showPageList = true;
	$.fn.datagrid.defaults.showFooter   = true;
	$.fn.datagrid.defaults.nowrap       = false;
	$.fn.datagrid.defaults.pagination   = true;
	$.fn.datagrid.defaults.method       = 'get';
	$.fn.datagrid.defaults.rownumbers   = false;
	$.fn.datagrid.defaults.fitColumns   = true;
	$.fn.datagrid.defaults.border       = false;
	$.fn.datagrid.defaults.striped      = true;
	$.fn.datagrid.defaults.singleSelect = true;
	$.fn.datagrid.defaults.emptyMsg     = "<span style='color:red'>没有找到相关数据</span>";
	
	</script>
	
	<script type="text/javascript">
	    $(function() {
	
	        $("#contentable").datagrid({
	                url : "./datagrid_data1.json",toolbar: '#tb,#tbar',
	                columns:[[   
	                    {field:'itemid',title:"itemid",align:'center'},
	                    {field:'productid',title:"productid",align:'center'},
	                    {field:'listprice',title:"listprice",align:'center'},
	                    {field:'unitcost',title:"unitcost",align:'center'},
	                    {field:'attr1',title:"attr1",align:'center'},
	                    {field:'status',title:"status",align:'center'},
	                   
	                ]]	
	        });

	    });
	    
	    
	</script>
</body>
</html>